<script lang="ts" setup>
import { postUploadAPI } from '@/apis/common'
import { useConsultStore } from '@/stores/consult'
import type { PostPatientConsultOrderParams } from '@/types/consult'
import { ref } from 'vue'

/* illnessDesc
string 
病情--症状描述
必需
illnessTime
number 
找医生/极速问诊必有-患病时间1一周内2一月内3半年内4半年以上

consultFlag
number 
找医生/极速问诊必有-是否就诊过0未就诊1就诊过
*/
const illnessInfo = ref<
  Pick<PostPatientConsultOrderParams, 'illnessDesc' | 'illnessTime' | 'consultFlag' | 'pictures'>
>({
  illnessDesc: '',
  illnessTime: 1,
  consultFlag: 0,
  pictures: [],
})
const illnessTimes = [
  { value: 1, text: '一周内' },
  { value: 2, text: '一月内' },
  { value: 3, text: '半年内' },
  { value: 4, text: '半年以上' },
]
const illnessFlages = [
  { value: 0, text: '未就诊' },
  { value: 1, text: '就诊过' },
]
//选择患病时间
const illnessTime = (value: number) => {
  illnessInfo.value.illnessTime = value
}
//选择是否就诊过
const illnessFlag = (value: number) => {
  illnessInfo.value.consultFlag = value
}
//上传图片
const selectPicture = async (e: UniHelper.UniFilePickerOnSelectEvent) => {
  const filePath = e.tempFilePaths[0]
  const res = await postUploadAPI(filePath)
  // console.log(res)
  illnessInfo.value.pictures?.push(res.data)
}
// 删除图片
const delectPicture = (event: UniHelper.UniFilePickerOnDeleteEvent) => {
  // 根据索引删除图片
  illnessInfo.value.pictures?.splice(event.index, 1)
  store.initIllnessInfo.pictures = illnessInfo.value.pictures
}
const store = useConsultStore()
// 提示用户是否恢复之前填写的病情数据
if (store.initIllnessInfo.illnessDesc) {
  uni.showModal({
    title: '温馨提示',
    content: '是否恢复之前填写的病情信息？',
    confirmText: '确认',
    confirmColor: '#16C2A3',
    cancelColor: '#848484',
    success(res) {
      if (res.confirm) {
        illnessInfo.value = store.initIllnessInfo
      }
    },
  })
}
const props = defineProps<{
  depId: string
  type: string
  illnessType: string
}>()

const nextStep = () => {
  // console.log(illnessInfo.value)
  // store.initIllnessInfo = illnessInfo.value
  store.depId = props.depId
  store.type = props.type
  store.illnessType = props.illnessType
  uni.navigateTo({
    url: '/subpkg_archive/pages/list/list?type=consult',
  })
}
</script>

<template>
  <scroll-view>
    <view class="description-page">
      <!-- 在线医生 -->
      <view class="doctor-online">
        <image src="/static/uploads/doctor-avatar-2.png" class="doctor-avatar" />
        <view class="doctor-info">
          <view class="name">在线医生</view>
          <view class="message">
            请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助
          </view>
          <view class="tips">
            <text class="iconfont icon-shield"></text>
            内容仅医生可见
          </view>
        </view>
      </view>
      <!-- 患者信息 -->
      <view class="patient-info">
        <view class="description">
          <uni-easyinput
            type="textarea"
            :input-border="false"
            placeholder-style="font-size: 30rpx; color: #979797"
            placeholder="请详细描述您的病情,病情描述不能为空"
            v-model="illnessInfo.illnessDesc"
          />
        </view>

        <view class="title">本次患病多久了？</view>
        <view class="tags">
          <text
            class="tag"
            v-for="item in illnessTimes"
            :key="item.value"
            :class="{ active: illnessInfo.illnessTime === item.value }"
            @click="illnessTime(item.value)"
            >{{ item.text }}</text
          >
        </view>

        <view class="title">此次病情是否去医院就诊过？</view>
        <view class="tags">
          <text
            class="tag"
            v-for="item in illnessFlages"
            :key="item.value"
            :class="{ active: illnessInfo.consultFlag === item.value }"
            @click="illnessFlag(item.value)"
            >{{ item.text }}</text
          >
        </view>
      </view>
      <!-- 上传图片 -->
      <view class="patient-picture">
        <uni-file-picker
          title="上传病情相关图片 (仅医生可见)"
          limit="8"
          :image-styles="{ width: '160rpx', height: '160rpx' }"
          file-extname="png,jpg,gif,webp"
          v-model="illnessInfo.pictures"
          @select="selectPicture"
          @delete="delectPicture"
        />
      </view>
      {{ illnessInfo }}
    </view>

    <!-- 下一步操作 -->
    <view class="next-step">
      <button
        @click="nextStep"
        :disabled="illnessInfo.illnessDesc.trim() === ''"
        class="uni-button"
      >
        下一步
      </button>
    </view>
  </scroll-view>
</template>

<style lang="scss">
@import './description.scss';
</style>
